<template>
    <div style="margin-top: 50px">

        <!--角色标题-->
        <el-row style="margin-right: 150px">
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <span style="font-size: 25px">角色管理</span>
            </div></el-col>
        </el-row>

        <!--表格-->
        <el-row style="margin-top: 25px;margin-left: 50px">
            <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                    <el-table
                            :data="tableData"
                            width="100%"
                            height="70%"
                            highlight-current-row
                            @current-change="handleCurrentChange">
                        <el-table-column
                                property="name"
                                label="角色名称"
                                width="300">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
        </el-row>

        <!--分页和查询还有按钮-->
        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="14"><div class="grid-content bg-purple">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :current-page="current"
                        :total="total"
                        :page-size="pageSize"
                        @current-change="change">
                </el-pagination>
                <div style="margin-top: 100px">
                    <el-button type="success" @click="addShow">添加新用户</el-button>
                    <el-button type="success" @click="del">删除用户</el-button>
                    <el-button type="success" @click="queryShow">查看角色权限</el-button>
                    <el-button type="success" @click="updateShow">修改角色权限</el-button>
                </div>
            </div></el-col>
        </el-row>

        <!--添加角色弹框-->
        <el-dialog
                title="添加角色"
                :visible.sync="addPower"
                :before-close="handleClose"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="角色名称:">
                    <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
                </el-form-item>
                <el-form-item label="拥有权限:">
                    <template>
                        <el-checkbox-group v-model="checkedCities">
                            <el-checkbox  v-for="power in powers" :label="power.id" :key="power">{{power.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="add">添加</el-button>
        </el-dialog>

        <!--修改角色弹框-->
        <el-dialog
                title="修改角色权限"
                :visible.sync="rolePower"
                :before-close="handleClose"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="角色名称:">
                    <span>{{name}}</span>
                </el-form-item>
                <el-form-item label="拥有权限:">
                    <template>
                        <el-checkbox-group v-model="checkedCities">
                            <el-checkbox  v-for="power in powers" :label="power.id" :key="power">{{power.name}}</el-checkbox>
                        </el-checkbox-group>
                    </template>
                </el-form-item>
            </el-form>
            <el-button type="success" @click="updatePower">修改</el-button>
        </el-dialog>

        <!--查看角色弹框-->
        <el-dialog
                title="查看角色权限"
                :visible.sync="queryPower"
                :before-close="handleClose"
                width="50%">
            <el-form ref="form" :model="form" label-width="100px" style="margin-right: 90px;margin-left: 50px">
                <el-form-item label="角色名称:">
                    <span>{{roleN}}</span>
                </el-form-item>
                <el-form-item label="拥有权限:">
                    <span v-for="powerBean in powerBeans" :key="powerBean">{{powerBean.name}}&nbsp;&nbsp;</span>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "Role",
        data(){
            return{
                tableData:[],
                roleId:"",

                //分页参数
                current:1,
                pageSize:3,
                total:20,
                //修改
                rolePower:false,
                checkedCities:[],
                powers:"",
                name:"",
                //查看
                queryPower:false,
                roleN:"",
                powerBeans:"",
                //添加
                addPower:false,
                roleName:"",
            }
        },
        mounted() {
            this.init();
        },
        methods:{
            handleCurrentChange(val){
                this.roleId = val.id;
            },
            init(){
                this.axios.get("jxc/role/findByPage",{
                    params:{
                        current:this.current,
                        pageSize:this.pageSize,
                    }
                }).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total
                    }
                )
            },
            change(current){
                this.current = current;
                this.init();
            },
            updateShow: function () {
                //所有的权限
                this.axios.get("jxc/power/findAll").then(
                    r => {
                        this.powers = r.data;
                        // console.log(this.powers)
                    }

                );

                this.powerChange();
                this.rolePower = true;
            },
            powerChange(){
                //对应角色拥有的权限
                this.axios.get("jxc/role/findById", {params: {id: this.roleId}}).then(
                    r => {
                        this.name = r.data.name;
                        var array = new Array();
                        for (let i = 0; i < r.data.powerBeans.length; i++) {
                            array.push(r.data.powerBeans[i].id);
                        }
                        this.checkedCities = array;
                    }
                );
            },
            updatePower(){
                let formData = new FormData();
                formData.append("roleId",this.roleId);
                formData.append("powerIds",this.checkedCities);
                this.axios.put("jxc/role/update",formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '修改成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '修改失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.rolePower = false;
                        this.init();
                    }
                )
            },
            del(){
                let url = "jxc/role/del/"+this.roleId;
                this.axios.delete(url).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '删除失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.current = 1;
                        this.init();
                    }
                )

            },
            queryShow(){
                //对应角色拥有的权限
                this.axios.get("jxc/role/findById", {params: {id: this.roleId}}).then(
                    r => {
                        this.roleN = r.data.name;
                        this.powerBeans = r.data.powerBeans;
                    }
                );
                this.queryPower = true;
            },
            addShow(){
                //所有的权限
                this.axios.get("jxc/power/findAll").then(
                    r => {
                        this.powers = r.data;
                        // console.log(this.powers)
                    }

                );
                this.addPower = true;
            },
            add(){
                let formData = new FormData();
                formData.append("name",this.roleName);
                formData.append("powerIds",this.checkedCities);
                this.axios.post("jxc/role/add",formData).then(
                    r => {
                        if (r.data == "ok") {
                            this.$message({
                                message: '添加成功',
                                type: 'success',
                                duration: 1000
                            });
                        } else if (r.data == "no") {
                            this.$message({
                                message: '添加失败',
                                type: 'error',
                                duration: 1000
                            });
                        }
                        this.addPower = false;
                        this.init();
                    }
                )
            }
        },


    }
</script>

<style scoped>

</style>